<template>
    <div>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>挂号统计</el-breadcrumb-item>
        </el-breadcrumb>


        <div>
            <button @click="switchData('week')">周数据</button>
            <button @click="switchData('month')">月数据</button>
            <button @click="switchData('year')">年数据</button>
        </div>
        <div id="barChart" style="height: 500px; width: 100%"></div>


        <h1>医院收入TOP10：</h1>
        <el-table
                :data="tableData"
                height="600"
                border
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="580" style="border: white">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址" style="border: white">
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        data() {
            return {
                chart: null,
                currentData: 'week', // 默认显示周数据
                tableData: [{
                    name: '北京协和医院',
                    address: '544 万元'
                }, {
                    name: '北京大学第一医院',
                    address: '487 万元'
                }, {
                    name: '解放军总医院',
                    address: '438 万元'
                }, {
                    name: '友好医院',
                    address: '387 万元'
                }, {
                    name: '上海第一人医院',
                    address: '328 万元'
                }, {
                    name: '复旦大学附属医院',
                    address: '280 万元'
                }, {
                    name: '上海同济医院',
                    address: '236 万元'
                },{
                    name: '天津市天津医院',
                    address: '189 万元'
                },{
                    name: '解放军272医院',
                    address: '152 万元'
                },{
                    name: '南京市第一医院',
                    address: '117 万元'
                }]
            };
        },
        mounted() {
            this.chart = echarts.init(document.getElementById('barChart'));
            this.renderChart();
        },
        methods: {
            renderChart() {
                const data = this.getDataForCurrentData(); // 根据currentData获取相应的数据

                const option = {
                    // ECharts配置
                    xAxis: {
                        data: data.categories,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '各科室收入',
                            type: 'bar',
                            data: data.values,
                        },
                    ],
                };

                this.chart.setOption(option);
            },
            getDataForCurrentData() {
                // 根据this.currentData获取不同的数据，这里可以是异步请求或从数据源获取
                // 示例数据
                if (this.currentData === 'week') {
                    return {
                        categories: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科'],
                        values: [56, 42, 38, 39, 25, 75, 58, 59, 70, 79, 63, 18, 30],
                    };
                } else if (this.currentData === 'month') {
                    return {
                        categories: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科'],
                        values: [168, 126, 114, 117, 75, 225, 174, 210, 237, 186, 54, 90],
                    };
                } else if (this.currentData === 'year') {
                    return {
                        categories: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科'],
                        values: [1680, 1260, 1149, 1200, 750, 2250, 1740, 2100, 2370, 1860, 540, 900],
                    };
                }
            },
            switchData(newData) {
                this.currentData = newData;
                this.renderChart();
            },
        },
    };
</script>